<template>
    <div class="major-box">
        <div class="table-area">
            <div class="left-buttons">
                <el-button type="primary" class="btns" @click="addTeacher">
                    <span style="margin-left: 0;">添加教师</span>
                </el-button>
                <el-button class="manage" @click="backIndex">
                    <span style="margin-left: 0;">返回</span>
                </el-button>
            </div>
            <el-table ref="multipleTableRef" :data="teacher" style="width: 100%" @selection-change="handleSelectionChange" >
                <el-table-column prop="name" label="教师姓名">
                    <template #default="scope">
                        <el-tooltip class="box-item" effect="dark" :content="scope.row.teacherName" placement="top-start" > <div class="text">{{ scope.row.teacherName }}</div> </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="account" label="教师账号">
                    <template #default="scope">
                        <el-tooltip class="box-item" effect="dark" :content="scope.row.teacherAccount" placement="top-start" > <div class="text">{{ scope.row.teacherAccount }}</div> </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="organization" label="所属组织机构" />
                <el-table-column prop="professionalLevel" label="职业级别" />
                <el-table-column prop="position" label="职务" />
                <el-table-column prop="major" label="专业" />
                <el-table-column prop="grade" label="年级" />
                <el-table-column prop="className" label="班级" width="260" />
            </el-table>
            <div class="pages">
                    <el-pagination small background layout="prev, pager, next,total" :total="totalNum" :page-size="pageSize" :current-page="currPage" class="mt-4" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
            </div>
        </div>
    </div>
    <el-dialog v-model="addTeacherDialogVisable" title="Tips" width="35%" top="25vh">
        <template #header>
            <div class="my-header">
                <span>新建专业</span>
            </div>
        </template>
        <div class="import-dialog">
            <div class="add-form">
                <div class="items">
                    <div class="text">教师/职称</div>
                    <div class="reds">*</div>
                </div>
                <el-select v-model="selectTeacher" class="m-2" placeholder="请选择教师" style="width: 100%;">
                    <el-option :key="index" :label="item.labelText" :value="item.id" v-for="(item,index) in teacherList" />
                </el-select>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addTeacher()">取消</el-button>
                <el-button type="primary" @click="teacherCocurseSave()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
    import { ref,defineEmits,onMounted,watch,defineProps } from 'vue'
    import '@wangeditor/editor/dist/css/style.css'
    import api from '@/api/index.js' 
    import { ElMessage } from 'element-plus'

    const addTeacherDialogVisable = ref(false);
    const emit = defineEmits(['update-show-visable'])
    const teacher = ref();
    const teacherList = ref();
    const selectTeacher = ref();
    const totalNum = ref(0);
    const currPage = ref(1);
    const pageSize = ref(10);
    const addTeacher = () => {
        selectTeacher.value = "";
        addTeacherDialogVisable.value = !addTeacherDialogVisable.value
    }
    const backIndex = () => {
        emit('update-show-visable', 0);
    }
    const getTeacherListByCourseId = async (courseId) => {
        if (!courseId) return
        try {
            var params = {
                pageNum: currPage.value,
                pageSize: pageSize.value,
                courseId: courseId
            }
            const response = await api.course_teachers( params )
            console.log("课程教师列表：", response)
            teacher.value = response.data || []
            totalNum.value = response.data.length
        } catch (error) {
            console.error('获取课程教师列表失败:', error)
            teacher.value = []
        }
    }
    const getTeacherList = async () => {
        try {
            const response = await api.teacher_list({ pageNum: 1, pageSize: 100 })
            teacherList.value = response.list || []
            for( var i = 0; i < teacherList.value.length; i++) {
                teacherList.value[i].labelText = teacherList.value[i].teacherName + '/' + teacherList.value[i].professionalLevel
            }
        } catch (error) {
            console.error('获取教师列表失败:', error)
            teacherList.value = []
        }
    }
    const teacherCocurseSave = async () => {
        if (!selectTeacher.value) {
            ElMessage.error('请选择教师')
            return
        }
        if (!props.courseId) {
            ElMessage.error('课程信息缺失')
            return
        }
        try {
            var params = [{ 
                courseId: props.courseId, 
                teacherId: selectTeacher.value 
            }];
            const response = await api.teacher_cocurse_save( params )
            if( response ){
                addTeacherDialogVisable.value = false
                ElMessage.success('添加教师成功！')
                getTeacherListByCourseId(props.courseId)
                getTeacherList()
            } else {
                ElMessage.error('添加教师失败！')
            }
        } catch (error) {
            console.error('添加教师失败:', error)
            ElMessage.error('添加教师失败！')
        }
    }
    // 定义props接收课程id
    const props = defineProps({
        courseId: {
            type: [Number, String],
            default: null
        }
    })
    watch(() => props.courseId, (newCourseId) => {
        if (newCourseId) {
            getTeacherListByCourseId(newCourseId)
        }
    })
    onMounted(() => {
        console.log(props.courseId)
        if (props.courseId) {
            getTeacherListByCourseId(props.courseId)
        }
        getTeacherList()
    });
</script>
<style scoped>
    :deep(.el-input__wrapper){background: #F2F3FA!important;}
    :deep(.el-table__row:nth-child(odd)){background: #ffffff!important;}
    :deep(.el-table__row:nth-child(even)){background: #F5F8FE!important;}
    :deep(.el-table th.el-table__cell) { background-color: #D2E3FB; }
    :deep(.el-input) { width: 100%;height: 35px; }
    :deep(.search-item .el-input) { flex: 0 0 200px;height: 35px; }
    :deep(.el-select) { flex: 0 0 200px;height: 35px; }
    :deep(.el-select__wrapper) { height: 35px; }
    :deep(.dialog-footer span) { font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px!important; }
    .major-box{border-radius: 8px;height: calc(85vh + 20px);width: 100%;background: #fff;}
    .search-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px;background: #fff;padding: 20px;border-radius: 8px;justify-content: space-between; }
    .search-item { display: flex;flex-direction: row;gap: 20px; }
    .el-button:hover{color: #1465E1!important;border: 1px solid #1465E1;}
    .el-button--primary{background: #1465E1!important;border: 1px solid #1465E1;}
    .el-button--primary:hover{color: #fff!important;}
    .table-area { background: white; border-radius: 4px; padding: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); }
    .table-area .text{ width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .pages{display: flex;flex-direction: row;justify-content: end;position: absolute;bottom: 30px;right: 30px; }
    .material-operations{display: flex;justify-content: space-around;font-family: 微软雅黑, Microsoft YaHei, SimSun;}
    .material-operations span{font-size: 12px!important;}
    .material-operations span:hover{color: #1465E1;}
    .material-operations .danger:hover{color: red;}
    .add-major{width: 120px;background: #1465E1;height: 35px;display: flex;flex-direction: row;align-items: center;justify-content: center;border-radius: 4px;margin-bottom: 20px;cursor: pointer;}
    .add-major img{width: 20px;height: 20px;}
    .add-major span{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;color: #fff;font-size: 14px;}
    .my-header{text-align: left;}
    .add-form{ width: calc(100% - 30px);margin: 10px auto;display: flex;flex-direction: row; gap: 20px; }
    .form-item{flex: 1;}
    .add-form .items{display: flex;flex-direction: row;gap: 5px;align-items: center;}
    .add-form .items .reds{ color: red; }
    .add-form .inputs{ margin-top: 10px; }
    .left-buttons { display: flex; gap: 12px; height: 55px; }
    .left-buttons img{width: 18px;}
    .left-buttons .btns{background: #1465E1;height: 35px;}
    .left-buttons .manage{color: #1465E1;height: 35px;border: 1px solid #1465E1;}
    .left-buttons span{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;}
    .class-switch{position: relative;}
    .class-switch .switch-item { cursor: pointer; position: relative; transition: color 0.3s ease; text-align: center; color: #7f8c8d;z-index: 2; }
    .slider { border-radius: 35px; height: 35px; background: #3869E7; z-index: 1; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); position: absolute; top: 0; }
    .switch-item.active { color: white; }
    .mode-1 { background: #1465E1; }
    .mode-2 { background: #1465E1; }
    .form-item .class-switch{display: flex;flex-direction: row;width: 100%;background: #F7F7F7;border-radius: 40px;margin-top: 10px;}
    .form-item .class-switch .switch-item{width: 50%;height: 35px;line-height: 35px;}
    .left-item{display: flex;flex-direction: row; flex: 0 0 49%;gap: 10px;}
    .avatar-uploader .avatar { width: 178px; height: 178px; display: block; }
    :deep(.avatar-uploader) { display: flex;flex-direction: row;justify-content: start; }
    :deep(.avatar-uploader .el-upload) { border: 1px dashed var(--el-border-color); border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; transition: var(--el-transition-duration-fast); }
    :deep(.avatar-uploader .el-upload:hover) { border-color: var(--el-color-primary); }
    :deep(.el-icon.avatar-uploader-icon) { font-size: 28px; color: #8c939d; width: 178px; height: 178px; text-align: center; }
    .import-dialog .add-form{margin-top: 20px;}
</style>